import React, {ReactNode, useEffect} from 'react';
import { useState } from 'react';
import type { MenuProps } from 'antd';
import { Layout, Menu, Space } from 'antd';
import styles from './index.module.scss';
import {
  HomeOutlined,
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  SettingOutlined,
  UserOutlined,
  WindowsOutlined,
} from '@ant-design/icons';
import {BsMoon, BsSun} from "react-icons/bs";
import {useRouter} from "next/router";

const { Header, Footer, Sider, Content } = Layout;
type MenuItem = Required<MenuProps>['items'][number];
type Theme = 'light' | 'dark';

function getItem(
  label: React.ReactNode,
  key: React.Key,
  icon?: React.ReactNode,
  children?: MenuItem[],
  type?: 'group',
): MenuItem {
  return {
    key,
    icon,
    children,
    label,
    type,
  } as MenuItem;
}

const menuItems: MenuItem[] = [
  getItem('首页', '/', <HomeOutlined />),
  getItem('系统设置', 'setting', <SettingOutlined />, [
    getItem('用户管理', '/user', <UserOutlined />),
    getItem('系统信息', '/system', <WindowsOutlined />),
  ]),
];

const darkPrimaryColor = '#001529';
const lightPrimaryColor = '#fff';
const darkTextColor = '#fff';
const lightTextColor = '#000';

type Props = {
  children?: ReactNode
}

const MainLayout: React.FC<Props> = (props) => {
  const [theme, setTheme] = useState<Theme>('dark');
  const [collapsed, setCollapsed] = useState<boolean>(false);
  const [selectKey, setSelectKey] = useState<string>('/user');
  const router = useRouter()

  useEffect(() => {
    setSelectKey(router.pathname)
  },[router.pathname])

  const onSelect = ({ key }: { key: string }) => {
    router.push(key);
  };

  return (
    <div className={styles.container}>
      <Layout className={styles.layout}>
        <Sider className={styles.left} collapsed={collapsed} collapsedWidth={'60'}>
          <Menu
            style={{ height: '100%' }}
            mode={'inline'}
            items={menuItems}
            defaultOpenKeys={['setting']}
            selectedKeys={[selectKey]}
            theme={theme}
            onSelect={onSelect}
          />
        </Sider>
        <Layout className={styles.right}>
          <Header
            className={styles.header}
            style={{
              background: theme === 'dark' ? darkPrimaryColor : lightPrimaryColor,
              color: theme !== 'dark' ? lightTextColor : darkTextColor,
            }}
          >
            <div className={styles.header__left}>
              {collapsed ? (
                <MenuUnfoldOutlined onClick={() => setCollapsed(!collapsed)} />
              ) : (
                <MenuFoldOutlined onClick={() => setCollapsed(!collapsed)} />
              )}
            </div>
            <div className={styles.header__right}>
              <Space>
                {theme === 'dark' ? (
                  <BsSun onClick={() => setTheme('light')} />
                ) : (
                  <BsMoon onClick={() => setTheme('dark')} />
                )}
              </Space>
            </div>
          </Header>
          <Content className={styles.content}>
            {props.children}
          </Content>
          <Footer className={styles.footer}>Electron app ©2023 Created by zhaown</Footer>
        </Layout>
      </Layout>
    </div>
  );
};

export default MainLayout;
